import { DataGrid } from "devextreme-react";
import React, { useEffect, useRef, useState } from "react";
import { getSamplingRecordColumns } from "./tableColumnData";
import { DevGrid } from "~/public/cpas-ui";
import { SampleRecordEditType, SampleReord, TableSamplingRecordParams } from "./typing";
import { addOrEditOrViewSampleRecord, getallSampleRecordTableRecordGuidArray, getSampleRecordList } from "./tableSamplingRecordService";
import { useModel } from "umi";
import { getRealTableName_sampleList } from "./component/service";
import SamplingRecordPopup from "./component/samplingRecordPopup";

export const TableSampleDetail = (props: any) => {

  const sampleRowData = props.data.data;
  const parentParams: TableSamplingRecordParams = sampleRowData.parentParams;

  const samplingRecordPopupRef = useRef<any>(null);

  const [isNeedSamplingRecordPopup, setIsNeedSamplingRecordPopup] = useState<boolean>(false);

  const { initialState } = useModel('@@initialState');
  const curUser: API.CurUser = initialState?.curUser;
  const { dbname, sjnd } = initialState?.curPart as any;
  const [dataGridData, setDataGridData] = useState<SampleReord[]>([]);
  useEffect(() => {
    const sampleTypeInStr: string = (sampleRowData.sampleType + '').split(',').map(item => `'${item} '`).join(',');

    const sampleTextFieldsArray: string[] = parentParams.curSampleTable?.sampleTextFieldsArray || [];

    const textFieldsInSql = sampleTextFieldsArray.map(fieldName => {
      return `${fieldName} = '${sampleRowData[fieldName]}' `
    }).join(' and ');
    const whereSql = ` and sample_type in (${sampleTypeInStr}) and ${textFieldsInSql}`;
    const allSampleRecordTable = getRealTableName_sampleList(parentParams.curSampleTable?.tableName || '',
      { data_id: parentParams.curDataId || '' })

    getallSampleRecordTableRecordGuidArray(dbname, allSampleRecordTable, whereSql).then(guridArray => {
      if (guridArray.length) {
        getSampleRecordList(dbname, parentParams.curSampleTable?.tableTitle, '', undefined, undefined,
          guridArray.map(item => `'${item}'`).join(','))
          .then(dataGridData => setDataGridData(dataGridData))
      }
    }
    )

  }, [])
  //查看样本记录
  function onTrackRecord(e: any) {
    console.log('onTrackRecord', e)
    addOrEditOrViewSampleRecord(
      SampleRecordEditType.view,
      dbname,
      samplingRecordPopupRef,// useRef<any>(null)
      curUser,
      dataGridData,
      sjnd,
      e.row.data,
      undefined,
      setIsNeedSamplingRecordPopup,
    );
  }
  const devGridRef = useRef<any>(null);
  // debugger
  // const gridWidth = (document.getElementById('tableSamplingListMainDiv')?.offsetWidth || (window.innerWidth - 450)) - 30;
  const gridWidth = (document.getElementById('tableSamplingListMaster')?.offsetWidth || (window.innerWidth - 450)) - 30;
  const columns = getSamplingRecordColumns({ onTrackRecord });
  columns.forEach(item => item.allowFiltering = false)

  return (
    <div style={{ marginBottom: 20 }}>
      <div className="master-detail-caption">
        {`抽样记录:`}
      </div>
      {isNeedSamplingRecordPopup && <SamplingRecordPopup ref={samplingRecordPopupRef} />}
      <div /* style={{width:'80vw'}} */>
        <DevGrid.RangeTap
          className={` PaperDevSortableGrid devHeadersCenter `}
          height={'100%'}
          width={gridWidth}
          ref={devGridRef}
          dataSource={dataGridData}
          keyExpr="guid"
          defaultColumns={columns}
          showBorders={true}
          showRowLines={true}
          showColumnLines={true}
          allowColumnResizing={true}
          disableFirstHeaderSearch={true}
          focusedRowEnabled={true}
          isRemote={true}
          paging={{ enabled: false, }}
          loadPanel={{ enabled: false }}
          scrolling={{
            mode: "virtual",
            rowRenderingMode: "virtual",
            renderAsync: true
          }}

          columnMinWidth={50}
          sheetName={`抽样记录`}
          excelName={`抽样记录`}

        />
      </div>
    </div>
  );
}
